import classNames from 'classnames'
import './index.scss'
import { useDispatch, useSelector } from 'react-redux'
import { updataActiveIndex } from '../../store/modules/takeaway'

// 获取父传子菜单列表query
const Menu = (query) => {
  // 获取dispatch函数
  const dispatch = useDispatch()
  // 获取store数据
  const { activeIndex } = useSelector(state => state.foods)

  // 渲染父传子列表数据
  const foodsList = query.foodsList
  const menus = foodsList.map(item => ({ tag: item.tag, name: item.name }))

  return (
    <nav className="list-menu">
      {/* 添加active类名会变成激活状态 */}
      {menus.map((item, index) => {
        return (
          <div
            key={item.tag}
            className={classNames(
              'list-menu-item',
              // 比较当前点击的index是否与store中的activeIndex相等
              activeIndex === index ? 'active' : ''
            )}
            onClick={() => dispatch(updataActiveIndex(index))}
          >
            {item.name}
          </div>
        )
      })}
    </nav>
  )
}

export default Menu
